<template>
  <view>
    <view class="top_bj">
      
      <view class="user-pic">
        <image src="/static/logo.png" class="pic-img"></image>
      </view>
      <view class="user-info" v-if="isAuth">
        <view>用户</view>
        <view>用户</view>
      </view>
      <view class="user-info" v-else>
        请登录
      </view>
    </view>
    <!-- 用户信息管理 -->
    <view class="menu_box">
      <uni-lit>
        <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="列表左侧带扩展图标" />
      </uni-lit>
    </view>
  </view>
</template>

<script>
  import {mapState} from 'vuex';
  export default {
    data() {
      return {
        extraIcon: {
            color: '#4cd964',
            size: '22',
            type: 'gear-filled'
          }
      }
    },
    methods: {
      
    },
    computed: {
      ...mapState(['isAuth']),
    }
  }
</script>

<style>
.top_bj {
  display: flex;
  height: 500upx;
  background-color: #00aa7f;
  align-items: center;
}
.user-pic {
  display: flex;
  width: 150upx;
  height: 150upx;
  line-height: 150upx;
  justify-content: center;
  align-items: center;
  margin: 0 20upx;
  border-radious: 50%;
  text-align: center;

  .pic-img {
    width: 100upx;
    height: 100upx;
  }
}
.user-info {
  flex: 1;
  /* height: 150upx; */
  color: #fff;
  /* display: flex; */
  /* align-items: center; */
}

.menu_box {
  background-color: #fff;
  margin: 5upx 20upx;
}
</style>
